<template>
  <div class="home">
    <div class="top">
        <nav class="top-nav">
          <input class="top_inp" @click="goserch" type="text" placeholder="搜索">
        </nav>

    </div>
    <div class="hie">
      <!-- 三级路由 -->
    <router-link :to="{path:'/home/follow'}">关注</router-link>
    <router-link :to="{path:'/home/recommend'}">推荐</router-link>
    <router-link :to="{path:'/home/note'}">笔记</router-link>
    </div>



    <!--三级路由出口 -->
    <router-view></router-view>
  </div>
</template>
<style scoped>
@import "../assets/gong.less";
.top-nav{
  width: 80%;
  margin: 0 auto;
  margin-left: 16px;
}
.top_inp{
  border:1px solid rgb(248, 212, 7) ;
  border-radius:30px;
  padding:0 10px;
  width: 100%;
  height: 30px;
}
.top{
  width: 100%;
  height: 35px;
  display: flex;
}
.home{
  padding: 5px;
}
.hie{
  margin: 10px auto;
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-content: center;
}


</style>


<script>
import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);
export default {
  data(){
    return{

    }
  },
  methods:{
   goserch(){
    // 跳转到搜索页面
     this.$router.push({path:"/serch"})
   }
  }
}





</script>
